<template>
    <div id="CityManage">
        <el-row>
            <el-col :span="1" style="margin-bottom:20px">
                <el-button type="primary" @click="dialogVisible=true,isUpdate=false,isAddNew=true">新增城市</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-row :span="24">
                 <table class="table table-bordered table-hover">
                    <tbody>
                        <tr>
                            <td>省份</td>
                            <td>城市名</td>
                            <td>操作</td>
                        </tr>
                        <tr v-for="(item,key) in cityList" :key="key">
                            <td>{{item.province}}</td>
                            <td>{{item.cityName}}</td>
                            <td>
                                <el-button
                                size="mini"
                                @click="handleEdit(index, item)">编辑</el-button>
                                <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(index, item)">删除</el-button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </el-row>
        </el-row>
        <el-dialog
        title="新增城市"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
          <el-row>
            <el-col style="margin-left:65px">
                省份: <el-select v-model="province">
                     <el-option v-for="(item,key) in chnCitys" :key="key"
                     :label="item.provinceName"
                     :value="item.provinceName"
                     @change.native="selectProvince"
                     >
                     </el-option>
                </el-select>
            </el-col>
        </el-row>
        <el-row><el-col> </el-col></el-row>
          <el-row>
            <el-col  style="margin-top:20px;margin-left:65px">
                城市: <el-select v-model="cityName">
                     <el-option v-for="(item,key) in citys" :key="key"
                     :label="item.citysName"
                     :value="item.citysName"
                     >
                     </el-option>
                </el-select>
            </el-col>
        </el-row>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false,addNewCity()" v-if="isAddNew">新增</el-button>
            <el-button type="primary" @click="dialogVisible = false,updateCityInfo()" v-if="isUpdate">更新</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
import city from './city.json'
export default {
     data(){
        return {
            offset: 20,
            cityList: [],
            province: '北京', 
            cityName: '',
            dialogVisible: false,
            isUpdate: false,
            isAddNew: true,
            currentId: '', //选中的当前城市的ID
            currentCity: {}, //要编辑的当前城市
            chnCitys: city.provinces,
            citys: []
        }
    },
    computed: {
        // citys(){
        //     var arr = [];
        //     this.chnCitys.forEach((item)=>{
        //         if(item.provinceName===this.province){
        //             arr = item.citys;
        //             return arr;
        //         }
        //     })
        //     return arr;
        // }
    },
    methods: {
        addNewCity(){
            this.dialogVisible = false;
            var addNewCityURL = window.baseURL+"/backstage/city/insert";
            this.$http.post(addNewCityURL,this.$qs.stringify({cityName: this.cityName,
                                                            province: this.province,
                                                            token: this.$token
                                                            }))
            .then((response)=>{
                this.loadData();
            })
            .catch((error)=>{
            })
        },
        handleEdit(index,row){
            this.dialogVisible = true;
            this.isUpdate = true;
            this.isAddNew = false;
            this.currentId = row.id;
            this.province = row.province;
            this.cityName = row.cityName;
        },
        handleDelete(index,row){
            // 删除城市 /backstage/campus/delete
            var deleteURL = window.baseURL+"/backstage/city/delete";
            this.$http.post(deleteURL,this.$qs.stringify({id: row.id,token:this.$token}))
            .then((response)=>{
                this.loadData();
            })
            .catch((error)=>{
            })
        },
        updateCityInfo(){
            // /backstage/campus/update
            var updateURL = window.baseURL+"/backstage/city/update";
            this.$http.post(updateURL,this.$qs.stringify({  id: this.currentId,
                                                            cityName: this.cityName,
                                                            province: this.province,
                                                            token: this.$token
                                                            }))
            .then((response)=>{
                this.loadData();
            })
            .catch((error)=>{
            })
        },
        handleClose(){
            this.dialogVisible = false;
        },
        selectProvince(){

        },
        loadData(){
            var dataURL = window.baseURL+"/backstage/city/findByPage?token="+this.$token;
            this.$http.get(dataURL)
            .then((response)=>{
                this.cityList = response.data.data.list.results;
            })
            .catch((error)=>{
            })
        }
    },
    created(){
        this.province = city.provinces[0].provinceName;
        this.cityName = city.provinces[0].citys[0].citysName;
        this.loadData();
    },
    watch: {
        province(value){
            city.provinces.forEach((item)=>{
                 if(item.provinceName==value){
                    this.citys = item.citys;
                    return;
                }
            })
            this.cityName = this.citys[0].citysName;
        }
    }
}
</script>

<style lang="scss" scoped>
    #CityManage {
        width: 100%;
        padding: 40px;
        box-sizing: border-box;
        position: absolute;
    }
</style>
